<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>add bug style</title>
    <style>
        table{border-collapse:collapse;border-spacing:0;border-left:1px solid #888;border-top:1px solid #888;margin: auto}
        th,td{border-right:1px solid #888;border-bottom:1px solid #888;padding:5px 15px;}
        th{font-weight:bold;}
        body{text-align: center}
    </style>
    {% load static %}
    <script type='text/javascript' src="/static/js/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#modifyName").click(function(){
                $(this).hide();
                $(this).next().show();
                $(this).parent().prev().children("label[name=first]").hide();
                $(this).parent().prev().children("label[name=second]").show();
            });
            $("#submitChange").click(function(){
                var styleName = $(this).parent().prev().children("label[name=second]").children("input").val();
                var styleId = $(this).parent().prev().children("label[name=second]").children("input").attr("id");
                alert(styleId+"---"+styleId);
            });
        });
    </script>
</head>
<body>

    <table>
        <tr>
            <td>名称：</td>
            <td><input type="text" name="styleName" id="styleName" /></td>
            <td><button id="submitStyleName">添加</button></td>
        </tr>
        <tr>
            <td colspan="2">
                {% for style in bugStyles %}
                    <label name="first">{{ style.styleName }}</label>
                    <label name="second" style="display: none"><input value="{{ style.styleName }}" id="{{ style.id }}" /></label>
                {% endfor %}
            </td>
            <td>
                <button id="modifyName">修改</button>
                <button id="submitChange" style="display: none">确定</button>
            </td>
        </tr>
    </table>
</body>
</html>